<template>
  <div class="form_box">
    <avue-form :option="option" v-model="crudData.form" @submit="handleSubmit">
    </avue-form>
  </div>
</template>
<script setup>
import Editor from '@/components/Editor/index.vue';
import { onMounted } from "vue";
import useUserStore from "@/store/modules/user.js";
import { configList, configPut } from "@/api/user/index.js";
import { ElMessage } from "element-plus";

const userStore = useUserStore();
let props = defineProps({
  content: {
    type: Object,
    default: () => [],
    required: true
  }
})
const crudData = reactive({
  form: {},
  nowData: {},
})
const option = reactive({
  labelWidth: 180,
  size: 'medium',
  column: [
    {
      label: '开启提现',
      prop: 'enable_withdrawal',
      type: 'switch',
      span: 24,
      dicData: [{
        label: '',
        value: '0'
      }, {
        label: '',
        value: '1'
      }],
    },
    {
      label: '开启抽奖',
      prop: 'enable_lottery',
      type: 'switch',
      span: 24,
      dicData: [{
        label: '',
        value: '0'
      }, {
        label: '',
        value: '1'
      }],
    },
    {
      label: '订单默认审核时间(分钟)',
      prop: 'default_order_review_time_minutes',
      span: 24,
      min:0,
      type: 'number',
      controlsPosition: 'top',
    },
    {
      label: '任务超时时间',
      prop: 'order_fail_time',
      span: 24,
      min:0,
      type: 'number',
      controlsPosition: 'top',
    },
    {
      label: '默认用户头像',
      prop: 'default_user_avatar',
      type: 'upload',
      dragFile: true,
      dataType: 'string',
      listType: 'picture-card',
      accept: 'image/png, image/jpeg',
      limit: 1,
      span: 24,
      propsHttp: {
        name: 'originalFilename',
        url: 'url',
      },
      headers: {
        Authorization: `Bearer ${userStore.token}`
      },
      tip: '只能上传jpg/png用户头像',
      action: '/prod-api/common/upload'
    },
    {
      label: '首页邀请图片',
      prop: 'homepage_invitation_image',
      type: 'upload',
      dragFile: true,
      dataType: 'string',
      listType: 'picture-card',
      accept: 'image/png, image/jpeg',
      limit: 1,
      span: 24,
      propsHttp: {
        name: 'originalFilename',
        url: 'url',
      },
      headers: {
        Authorization: `Bearer ${userStore.token}`
      },
      tip: '只能上传jpg/png用户头像',
      action: '/prod-api/common/upload'
    },
    {
      label: '首页视频链接',
      prop: 'homepage_video_link',
      span: 24,
      prefixIcon: 'el-icon-plus',

    },
    {
      label: '一个Ip可注册账户数量',
      prop: 'number_of_accounts_per_ip',
      span: 24,
      prefixIcon: 'el-icon-plus',

    },
    {
      label: '默认区号',
      prop: 'default_area_code',
      span: 24,
      prefixIcon: 'el-icon-plus',

    },
    {
      label: '默认国家',
      prop: 'default_area_country',
      span: 24,

    },
      {
      label: '货币名称',
      prop: 'currency_name',
      span: 24,
      prefixIcon: 'el-icon-edit',

    },
    {
      label: '提现说明',
      prop: 'withdrawal_recharge_instructions',
      type: 'textarea',
      span: 24,
    },
    // {
    //   label: '客服地址(Telegram)',
    //   prop: 'customer_service_address_telegram',
    //   span: 24,
    //   prefixIcon: 'el-icon-plus',

    // },
    // {
    //   label: '客服地址(Whatsapp)',
    //   prop: 'customer_service_address_whatsapp',
    //   span: 24,
    //   prefixIcon: 'el-icon-plus',

    // },
    // {
    //   label: '客服说明',
    //   prop: 'customer_service_instructions',
    //   type: 'textarea',
    //   span: 24,

    // },
    {
      label: 'App下载地址',
      prop: 'app_download_link',
      span: 24,
      prefixIcon: 'el-icon-plus',

    },
    {
      label: '首页弹窗公告',
      prop: 'homepage_popup_announcement',
      span: 24,
      component: Editor,
    },
    {
      label: '抽奖描述',
      prop: 'lottery_description',
      type: 'textarea',
      span: 24,

    },
  ]
})
const handleSubmit = (form, done) => {
  let params = {}
  params.basic = form
  console.log('form', params)
  configPut(params).then(res => {
    ElMessage.success('操作成功')
    initData()
  }).catch(err => {
  })
  done()
}
const initData = async () => {
  await configList().then(res => {
    crudData.form = res.data.basic
  })
}
onMounted(() => {
  initData()
})
</script>
<style scoped lang="scss">
.form_box {
  width: 100%;
  padding: 0 20px 20px 20px;
  height: calc(100vh - 120px);
  overflow-y: auto;

  ::v-deep .avue-form {
    .el-collapse-item__wrap {
      padding: 20px;
    }
  }
}
</style>
